import React from 'react';
import {Badge, Button, Card, Checkbox, Form, Input, DatePicker, Select, Table} from 'antd';
import Utils from './../../utils/utils';


const FormItem = Form.Item;
const Option = Select.Option;

class FilterForm extends React.Component {

    initFormList = () => {

        const {getFieldDecorator} = this.props.form;
        let FormItemList = [];
        //父组件传递的参数
        const formList = this.props.formList;
        if (formList && formList.length > 0) {
            formList.forEach((item, i) => {
                let label = item.label;
                let field = item.field;
                let initialValue = item.initialValue || '';
                let placeholder = item.placeholder;
                let width = item.width;
                if (item.type === '时间查询') {
                    const start_time = <FormItem label="订单时间" key={field}>
                        {
                            getFieldDecorator('start_time', {})(
                                <DatePicker
                                    style={{width: 200}}
                                    showTime
                                    format="YYYY-MM-DD HH:mm:ss"
                                />
                            )
                        }

                    </FormItem>
                    FormItemList.push(start_time);
                    //label="~"  colon={false}  波浪线连接
                    const end_time = <FormItem label="~" colon={false} key={field}>
                        {
                            getFieldDecorator('end_time', {})(
                                <DatePicker
                                    style={{width: 200}}
                                    showTime
                                    format="YYYY-MM-DD HH:mm:ss"
                                />
                            )
                        }

                    </FormItem>
                    FormItemList.push(end_time)
                } else if (item.type === 'INPUT') {
                    const INPUT = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator([field], {
                                initialValue: initialValue
                            })(
                                <Input type="text" placeholder={placeholder}  style={{width:width}} />
                            )
                        }

                    </FormItem>
                    FormItemList.push(INPUT)

                } else if (item.type === 'SELECT') {
                    const SELECT = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator([field], {
                                initialValue: initialValue
                            })(
                                <Select
                                    style={{width: width}}
                                    placeholder={placeholder}>
                                    {Utils.getOptionList(item.list)}
                                </Select>
                            )
                        }

                    </FormItem>
                    FormItemList.push(SELECT)

                } else if (item.type === 'CHECKBOX') {
                    const CHECKBOX = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator([field], {
                                initialValue: initialValue,
                                valuePropName: 'checked'
                            })(
                                <Checkbox>
                                    {label}
                                </Checkbox>
                            )
                        }

                    </FormItem>
                    FormItemList.push(CHECKBOX)
                }else if (item.type === 'DATE') {
                    const DATEPICKER = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator('[field]', {})(
                                <DatePicker
                                    style={{width: width}}
                                    showTime
                                    format="YYYY-MM-DD HH:mm:ss"
                                />
                            )
                        }

                    </FormItem>
                    FormItemList.push(DATEPICKER)
                }

            })
        }

        return FormItemList;

    };
    //查询：把当前行输入的值取到
    handleSearch = () => {
        let fieldValue = this.props.form.getFieldsValue();
        this.props.filterSearch(fieldValue);

    };

    //重置
    reset = () => {
        this.props.form.resetFields()

    };


    render() {
        return (
            <Form layout="inline">
                {this.initFormList()}
                <FormItem>
                    <Button type="primary" style={{marginRight: 10}} onClick={this.handleSearch}>查询</Button>
                    <Button type="primary" onClick={this.reset}>重置</Button>
                </FormItem>
            </Form>
        );
    }


}

export default Form.create()(FilterForm);
